import {getChartId} from "./js/tool.js";
import {drawCharts} from "./js/draw.js";
import HosChart, {init} from './hosCharts/hosCharts';

export default {
    props: {
        // chart 名称
        name: {
            default: "line chart"
        },
        // chart 名称
        option: {
            default: null
        },
        // chart 类型
        type: {
            default: "line"
        },
        // chart 样式前缀
        classPrefix: {
            default: "hos-icon"
        },
        // chart 尺寸
        width: {
            default: 300,
        },
        // chart 尺寸
        height: {
            default: 300,
        },
        // chart 颜色
        color: {
            default: "#333333"
        },
        // chart 背景颜色
        backgroundColor: {
            default: "#FFFFFF"
        },
        // chart 图标禁用
        disabled: {
            default: false
        },
        // chart 自定义绑定数据
        dataClick: {
            default: null
        }
    },
    data: {
        id: "",
        ref: "",
        showIcon: false,
        // 防止重复绘制
        isReady: false,
        chart: null,
    },
    // 初始化自定义组件
    onInit() {
        this.id = getChartId(this.name);
        this.ref = "hos-icon_" + this.id;
        this.$watch('propStr', 'onPropertyChange');
    },

    // 自定义组件布局完成
    onLayoutReady() {
        // 如果已经绘制完成不就不需要重复绘制
        if (!this.isReady) {
            this.drawCharts();
        }
    },
    computed: {
        chartClass() {
            let classes = [];
            let preClass = "";
            let classPrefix = this.classPrefix;
            let name = this.name;
            let type = this.type;

            if (classPrefix && typeof classPrefix == "string") {
                // classes.push(classPrefix);
                preClass = classPrefix + "-" + type + '-';
            }
            if (name && typeof name == "string") {
                preClass = preClass + name
                classes.push(preClass);
            }
            return classes.join(" ");
        },
        propStr() {
            return `${this.name}_${this.type}_${this.classPrefix}_${this.width}_${this.height}_${this.color}_${this.backgroundColor}_${this.disabled}`;
        }
    },

    // 监听props的变化来重绘icon
    onPropertyChange(newV, oldV) {
        if (newV !== oldV) {
            this.showIcon = false;
            this.drawCharts();
        }
    },

    // 绘制图表
    drawCharts() {
        const { width, height } = this;
        this.isReady = false;
        this.showIcon = true;
        const canvas = this.$refs["hos-charts"];
        const ctx = canvas.getContext("2d", {
            antialias: true
        });

        if (ctx) {
            // 下一次绘制之前清除画布
            ctx.clearRect(0, 0, width, height);

            const chart = init(ctx);
            this.chart = chart;
            this.option && this.setOption(this.option );

            this.isReady = true;
        }

    },
    // 设置option
    setOption(option){
        this.chart && this.chart.setOption(option);
    },
    // 图标点击事件
    onclick() {
        if (!this.disabled) {
            this.$emit("click", this.dataClick)
        }
    }
}